<template>
  <el-card shadow="hover">
    <template #header>
      <div class="card-header">
        <el-input v-model="input" placeholder="请输入订单号" clearable style="width: 200px;margin-right: 10px;" />
        <el-select v-model="value" class="m-2" placeholder="Select" style="margin-right: 10px;">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-button class="button" color="#1baeae">+ 增加</el-button>
        <el-button class="button" color="#f56c6c" :icon="Delete">批量删除</el-button>
      </div>
    </template>
    <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column label="Date" width="120">
        <template #default="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column property="name" label="Name" width="120" />
      <el-table-column property="address" label="Address" show-overflow-tooltip />
    </el-table>
  </el-card>
</template>

<script>
  export default {
    name: 'indentAdministration',
  }
</script>

<script setup>
  import {
    Delete
  } from '@element-plus/icons-vue'
  import {
    ref
  } from "vue"
  const input = ref('')
</script>

<style lang="less" scoped>
  .button {
    color: #fff;
  }
</style>